<!--
    Author: wyb
    Create: 2021/12/7

    登录页面:
	* 用户可在首页输入用户名和密码然后点击登录键进行登录
	* 用户点击登录后系统将对密码计算摘要然后和用户名一起发送给后端进行登录验证

    注册页面:
    * 用户可在首页输入用户名和密码然后点击注册键进行注册(已经注册过的用户名无法再次注册)
	* 用户点击注册后系统将对密码计算摘要然后和用户名一起发送给后端进行登录验证

 -->
<!DOCTYPE html>
<html>
<head>
    <title>登录页面</title>

    <!-- CSS代码 -->
    <style type="text/css">
        #container{
            width: 660px;
            margin: 0 auto;
        }
    </style>

    <!--  通过CDN引入bootstrap和jQuery  -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!--  引入MD5(使用里面的hex_md5)  -->
    <script src="md5.js"></script>

    <!-- 点击登录后的核心代码 -->
    <script type="text/javascript">

        // 点击登录按钮后调用该函数
        function login() {
            // 用原生JavaScript获取前端的用户名和密码
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value
            // 在调试器中打印
            console.log(username, password)

            // 这里用MD5对原始密码计算摘要然后发送给后端
            console.log(hex_md5(password))

            // 给后端接口发送用户名和密码
            $.post("http://localhost:8888/api/login", {"username": username, "password": hex_md5(password)}, function(data) {
                // 将响应得到的结果填到页面下方
                $(".result").html(data);
            });
        }

        // 点击注册按钮后调用该函数
        function register() {
            // 用原生JavaScript获取前端的用户名和密码
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value
            // 在调试器中打印
            console.log(username, password)

            // 这里用MD5对原始密码计算摘要然后发送给后端
            console.log(hex_md5(password))

            // 给后端接口发送用户名和密码
            $.post("http://localhost:8888/api/register", {"username": username, "password": hex_md5(password)}, function(data) {
                // 将响应得到的结果填到页面下方
                $(".result").html(data);
            });
        }


    </script>

</head>
<body>

<div id="container">
    <div>
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
            </div>

            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>

            <div class="form-group">

                <div class="col-sm-offset-2 col-sm-3">
                    <button onclick="register()" type="button" class="btn btn-success btn-block">注册</button>
                </div>

                <div class="col-sm-offset-2 col-sm-3">
                    <button onclick="login()" type="button" class="btn btn-success btn-block">登录</button>
                </div>

            </div>

            <div class="result">

            </div>

        </form>
    </div>




</div>



</body>
</html>